<template>
    <div class="trDetail">
        <div class="rowBox" v-for="(item,index) in formData" :key="index" :style="'width:'+item.pop">
            <div v-if="!item.flag">
                <span class="labelBox">{{item.label}}</span>
                <span class="valueBox">{{item.value}}</span>
            </div>
            <div class="imgRowBox" v-if="item.flag">
                <span class="imglabelBox">{{item.label}}</span>
                <span  class="imgvalueBox">
                    <img v-for="(i,index) in item.img_list" :style="'height:'+item.height+';width:'+item.width+';'" :key=index src="../../assets/上传之后的图片备份.png" alt="">
                </span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    formData: {
      type: Array,
      default: () =>
        [{
          label: '姓 名：',
          value: '经纬（jingwei01）',
          color: '',
          flag: false
        }]

    }
  }
}
</script>

<style lang="scss" scoped>
    .trDetail{
        height: 100%;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        background:rgba(255,255,255,1);
          div:nth-child(even)
                {
                    border-left: 1px solid rgba(240,242,245,1);
                }
       .rowBox{
           width: 50%;
           display: flex;
           justify-content: flex-start;
           align-items: center;
           border-bottom: 1px solid rgba(240,242,245,1);
           padding: 17px 0 17px 0;
            flex-direction: row;
            .labelBox{
                padding-left: 24px;
                font-size:14px;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:rgba(127,143,164,1);
                line-height:22px;
                width: 76px;
                 overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;

            }
            .valueBox{
                font-size:14px;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:rgba(53,64,82,1);
                line-height:22px;
                text-align: start;

            }
            .imgRowBox{
                display: flex;
                flex-direction: row;

            .imglabelBox{
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                padding-left: 24px;
                font-size:14px;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:rgba(127,143,164,1);
                line-height:22px;
                 width: 102px;

            }
            .imgvalueBox{
                display: flex;
                justify-content:flex-start;
                flex-wrap: wrap;
                    img{

                        // background: burlywood;
                        margin:20px 16px 0px 16px;
                    }
                }
            }

       }

    }
</style>
